<script setup lang="ts">
import { fetchGetPersonJoinedSociety } from "@/api/screen/person";
import Echarts from "@/components/echartsTemplate/index.vue";
import { onMounted, reactive } from "vue";


const xData = reactive([])
const yData = reactive([])
onMounted(() => {
  getGetJoinedSociety()
})
// 获取学院数据
const getGetJoinedSociety = async () => {
  const res = await fetchGetPersonJoinedSociety()
  res.data.rows.forEach((item: any) => {
    xData.push(item.name)
    yData.push(((item.joinedNumber / item.totalNumber) * 100).toFixed(2))
  })
}

const option = reactive({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top: '20%',
    right: '5%',
    left: '8%',
    bottom: '28%'
  },

  xAxis: [{
    type: 'category',
    axisLabel: {
      color: '#fff'
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#0a3e98'
      }
    },
    axisTick: {
      show: false,
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: '#195384',
        type: "dotted",
      }
    },
    data: xData
  }],
  yAxis: [
    {
      type: 'value',
      name: "入团率",
      min: 0,
      position: 'left',
      nameTextStyle: {
        color: "#fff",
        fontSize: 11,
      },
      axisLine: {
        lineStyle: {
          color: '#0a3e98'
        }
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#0a3e98',
          type: "dotted",
        }
      },
      axisLabel: {
        formatter: '{value}',
        textStyle: {
          color: "#fff",
        }
      },
    },
    {
      type: 'value',
      name: "人",
      min: 0,
      position: 'left',
      nameTextStyle: {
        color: "#fff",
        fontSize: 11,
      },
      axisLine: {
        lineStyle: {
          color: '#0a3e98'
        }
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#0a3e98',
          type: "dotted",
        }
      },
      axisLabel: {
        formatter: '{value}',
        textStyle: {
          color: "#fff",
        }
      },
    }
  ],
  dataZoom: [
    {
      show: true,
      realtime: true,
      start: 0,
      end: 40
    }
  ],
  series: [
    {
      name: '人数',
      type: 'bar',
      barWidth: 15, //柱子宽度
      barGap: 0.3, //柱子之间间距
      yAxisIndex: 1,
      itemStyle: {
        color: {
          type: "linear",
          x: 0, // 右
          y: 1, // 下
          x2: 0, // 左
          y2: 0, // 上
          colorStops: [
            {
              offset: 0,
              color: "#2FAEF2", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#1CD8A8", // 90% 处的颜色
            },
          ],
        },
      },
      label: {
        normal: {
          show: true,
          position: "top",
          formatter: "{c}",
          color: '#00C0FF'
        }
      },
      data: yData,
    },
  ]
});
</script>

<template>
  <div class="ringDiagram">
    <Echarts :option="option"></Echarts>
  </div>
</template>



<style scoped lang="scss">
.ringDiagram {
  height: 100%;
}
</style>
